<template>
  <div v-if='propData.modelValue' class="dialog">
    <div class="dialog-header">
      <div>标题---{{title}}</div>
      <div @click="close" class="closeBtn">x</div>
    </div>
    <div class="dialog-content">  
      内容
    </div>

  </div>
</template>

<script setup lang='ts'>

type Props = {
  modelValue: boolean,
  title: string,
  modelModifiers?: {
    bigger: boolean
  }
  titleModifiers?: {//接收自定义修饰符时名字要和父组件的符合
    aaa: boolean
  }
}

const propData = defineProps<Props>()//1.绑定到prop

const emit = defineEmits(['update:modelValue','update:title'])//2.输入新的值时在 input 元素上触发 update:modelValue 事件

const close = () => {
  emit('update:modelValue', false)  
  emit('update:title', '我改变了')
  console.log('propData.modelModifiers', propData.modelModifiers)
  console.log('propData.titleModifiers',propData.titleModifiers)
  // if (propData.modelModifiers?.bbigger) {
  //   console.log('自定义指令触发了')
  //   emit('update:modelValue','你是一条狗')
  // } else {
  //   emit('update:modelValue','你是一只猫')
  // }
}

</script>

<style lang='less'>
.dialog {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  &-header {
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .closeBtn:hover {
      cursor: pointer;
    }
  }

  &-content {
    padding: 10px;
  }
}
</style>